<template lang="pug">
  el-drawer.commonDrawer(
    :title="`${id ? '修改' : '新增'}教学区域`"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="720px"
    @close="$_handleCancel"
  )
    .drawer-content
      alert(type="warning" size="small") 一个摄像头只能在一个区域内出现,若要几个班级共用摄像头 , 请配置多个公共区域
      form-box.mt16(
        ref="form"
        v-loading="loading"
        :fields="fields"
        labelWidth="160px"
        size="mini"
        :submit-handle="submitHandle"
        :submitting="submitting"
        @cancelHandle="$_handleCancel"
      )
</template>
<script>
import omit from 'lodash/omit'
import { getTeachAreaInfo, teachAreaSubmit } from '@/api/common'
import Alert from '@/components/Basic/Alert'
export default {
  components: {
    Alert
  },
  props: {
    visible: [Boolean],
    id: {
      type: [String, Number],
      default: ''
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      submitting: false,
      info: {}
    }
  },
  computed: {
    // 通过计算属性，对.sync进行转换，外部也可以直接使用visible.sync
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    fields () {
      const { info, hidden } = this
      return [
        {
          key: 'name',
          label: '名称',
          layoutCol: { sm: 24, md: 18, lg: 18 },
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.name
        },
        {
          key: 'isPublic',
          label: '是否设置为公共区域',
          type: 'switch',
          layoutCol: { sm: 24, md: 24, lg: 24 },
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.isPublic || false,
          hidden: hidden
        },
        {
          key: 'remark',
          label: '备注',
          type: 'textarea',
          layoutCol: { sm: 24, md: 24, lg: 24 },
          rules: [{ required: true, message: '请输入' }],
          initialValue: info.remark
        }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.getData()
      }
    }
  },
  methods: {
    getData () {
      const { id } = this
      if (id) {
        this.loading = true
        getTeachAreaInfo({ teachingAreaId: this.id }).then(res => {
          this.info = res || {}
          console.log(this.info)
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.info = {}
      }
    },
    // 提交
    submitHandle (val) {
      console.log(val)
      const { id } = this
      this.submitting = true
      teachAreaSubmit({ isPublic: val.isPublic }, {
        ...omit(val, 'isPublic'),
        teachingAreaId: id || null
      }).then(() => {
        this.$message.success('提交成功')
        this.$emit('sureHandle')
        this.$_handleCancel()
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
